<template>
    <div class="banner-list-wrap">
        <!-- :slides-per-view="2" -->
        <!-- <Swiper class="swiper-banner" ref="mySwiper" :loop="true" @swiper="swiperHandler" @slideChange="slideChangeHandler"
            :modules="modules" :autoplay="{ delay: 3000 }" navigation :pagination="{ clickable: true }"
            :scrollbar="{ draggable: true }">
            <SwiperSlide v-slot="slotScope">01--- {{ slotScope }}</SwiperSlide>
            <SwiperSlide v-slot="slotScope">02--- {{ slotScope }}</SwiperSlide>
            <SwiperSlide v-slot="slotScope">03--- {{ slotScope }}</SwiperSlide>
            <SwiperSlide v-slot="slotScope">04--- {{ slotScope }}</SwiperSlide>
            <SwiperSlide v-slot="slotScope">05--- {{ slotScope }}</SwiperSlide>
            <SwiperSlide v-slot="slotScope">06--- {{ slotScope }}</SwiperSlide>

        </Swiper> -->

        <Swiper class="swiper-banner" 
            v-if="bannerList"
            ref="mySwiper" 
            :loop="true" 
            observer
            @swiper="swiperHandler"          
            @slideChange="slideChangeHandler"
            :modules="modules" :autoplay="{ delay: 3000 }" 
            navigation 
            :pagination="{ clickable: true }"
            :scrollbar="{ draggable: true }"
        >   
            <!-- 
                v-for 和 v-if优先级
                vue2中 v-for优先级高于v-if  会先遍历数据生成元素,在判断元素是否渲染到页面中
                vue3中 v-if优先级高于v-for  会先判断元素是否渲染到页面中,在遍历数据生成元素

             -->

             <!-- vue2 -->
            <!-- <SwiperSlide v-for="item,index in bannerList" v-if="item.flag" :key="index">
                <img :src="item.img" alt="">
            </SwiperSlide> -->

            <!-- vue3 -->
            <template v-for="item,index in bannerList" >
                <SwiperSlide  v-if="item.flag" :key="index" >
                    <img :src="item.img" alt="">
                </SwiperSlide>
            </template>
          

        </Swiper>
        <el-button @click="swiper.slidePrev()">上一张</el-button>
        <el-button @click="swiper.slideNext()">下一张</el-button>
    </div>
</template>

<script>

import { getBannerListAPI } from "@/api/banner";


// 1. 引入swiper组件 
import { Swiper, SwiperSlide } from 'swiper/vue';

// 4. 引入swiper组件的不同模块
import { Autoplay, Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';

// 2. 引入swiper默认样式 (不包含模块样式)
import 'swiper/css';

// 5. 引入模块样式
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

export default {
    name: "BannerListView",
    components: {
        Swiper,
        SwiperSlide
    },
    data() {
        return {
            modules: [Autoplay, Navigation, Pagination, Scrollbar, A11y],
            swiper:null, // 存储swiper实例对应的Proxy代理对象
            bannerList:null,
        }
    },
    methods: {
    
        swiperHandler(swiper) {
            console.log("swiperHandler", swiper);

            this.swiper = swiper;  //swiper组件挂载完毕 =>  存储swiper实例对应的Proxy代理对象
        },
        slideChangeHandler(swiper) {
            console.log("slideChangeHandler", swiper);
        },

        async getBannerList() {
            try {
                let result = await getBannerListAPI();
                console.log("请求成功", result);
                this.bannerList = result.data;
            } catch (err) {
                ElMessage({
                    type: "error",
                    message: err.message,
                })
            }
        },

    },
    mounted() {
        this.getBannerList();
    }
}
</script>

<style lang="scss" scoped>
.banner-list-wrap {
    padding: 20px;
}

//  3. 定swiper容器宽度和高度
.swiper-banner {
    width: 100%;
    height: 500px; 
    img{
        width: 100%;
    }
}
</style>